<template>
	<view class="page">
		<view class="wrapper" v-if="JSON.stringify(course)!='{}'">
			<view class="header" @click="schedule()">
				<view class="f_40 dis-flex flex-y-center"  :style="'color:' + statusColor(course.status,course.is_start)">
					<view>{{course.status==3?(course.is_start?'授课中':'课程未开始'):course.status==2?'预约上课':course.status==4?'课次已完成':course.status==5?'退款申请中':course.status==6?'退款失败':course.status==7?'退款成功':''}}</view>
					<view class=""><image class="next_icon" :src="course.status==3?(course.is_start?imgPrefix('/static/image/icon/next_orange.png'):imgPrefix('/static/image/icon/address_next.png')):imgPrefix('/static/image/icon/next.png')"></image></view>
					</view>
				<view class="surplus f_24" >
					课程<text>{{course.index}}/{{course.course_order.num}}</text>，剩余<text>{{course.surplus}}</text>课次，要继续加油噢
				</view>
			</view>
			<!-- 课程信息 -->
			<view class="course_info">
				<view class="title navy_blue f_32">课程信息</view>
				<view class="info dis-flex flex-y-center">
					<view class="headeravatar"><image :src="course.user!=null?course.user.avatar:imgPrefix('/static/image/icon/default_avatar.png')" mode=""></image></view>
					<view class="dis-flex flex-x-between flex-y-center flex-box">
						<view class="">
							<view class="f_32 navy_blue" v-if="course.user!=null">
									<text>{{course.user.nickname}}</text>
									<text class="m-l-15">{{course.user.mobile}}</text>
							</view>
							<view class="gery1 dis-flex course_count f_24">.
								<text class="course_num_text">
									第
									<text class="course_num">{{course.index}}</text>
									课 剩余
									<text class="course_num">{{course.surplus}}</text>
									课程
								</text>
							</view>
						</view>
						<view class="icon">
							<!-- <image :src="imgPrefix('/static/image/icon/next.png')" mode=""></image> -->
						</view>
					</view>
				</view>
				<view class="course_type">
					<view class="dis-flex flex-x-between f_28 gery1 ">
						<text>课程语种</text>
						<text class="navy_blue">{{course.course_order.language}}</text>
					</view>
					<view class="dis-flex flex-x-between f_28 gery1">
						<text>授课方式</text>
						<text class="navy_blue">{{course.course_order.classdata==1?'老师上门':'学生上门'}}</text>
					</view>
				</view>
			</view>
			<view class="course_address">
				<view class="title navy_blue f_32">联系信息</view>
				<!-- 上课位置,学生上门才有显示 -->
				<view class="dis-flex flex-y-center flex-x-between address_box"  v-if="course.course_order.classdata==1">
					<view class="dis-flex flex-y-center">
						<view class="address">
							<image :src="imgPrefix('/static/image/icon/address.png')" mode=""></image>
						</view>
						<view class="f_24">
							<view class="address_detail onelist-hidden">{{course.course_order.address}}</view>
							<view class="">
								<text>{{course.course_order.username}}</text>
								<text>{{course.course_order.phone}}</text>
							</view>
						</view>
					</view>
					<view class="navigation_icon violet1 f_24 dis-flex flex-y-center" @tap.stop="address2Location(course.course_order.address)">
						<text>导航</text><image :src="imgPrefix('/static/image/icon/address_next.png')" mode=""></image>
					</view>
				</view>
				<!-- 联系学生 -->
				<view class="contact-with-students dis-flex flex-x-center flex-y-center" @click="callPhone">
					<view class=""><image :src="imgPrefix('/static/image/teacher/class_time_detail_contact.png')" mode=""></image></view>
					<view>联系学生</view>
				</view>
			</view>
			
			<!-- 授课时间 -->
			<view class="teaching-time">
				<view class="dis-flex flex-x-between">
					<view class="f_28 gery1">授课时间</view>
					<view class="violet1 f_28"><text>{{course.date}}{{course.week}}</text><text>{{course.time}}</text></view>
				</view>
				<view class="dis-flex flex-x-between finish-time" v-if="course.status==4">
					<view class="f_28 gery1">完成时间</view>
					<view class="navy_blue f_28">{{course.updatetime}}</view>
				</view>
			</view>
		</view>
		<zan-popup :show="showCourse" type="bottom" @close="closeCoursePopup">
			<view class="schedule-list-box">
				<view class="title t-c f_32">
					课程进度
					<image @click="closeCoursePopup" :src="imgPrefix('/static/image/icon/address_close.png')"></image>
				</view>
				<view v-if="course.index==1&&scheduleList.length==0" class="item dis-flex flex-x-between f_26 color0">
					<view class="dis-flex flex-x-between status-box flex-y-center">
						<text :class="['li','b_g_violet1']"></text>
						<text>课次未预约</text>
						<text>1/{{course.num}}</text>
					</view>
				</view>
				<view v-else v-for="(item, index) in scheduleList"
					:key="index"
					:class="['item', 'dis-flex', 'flex-x-between', 'f_26', item.status == 3||course.course_count==0 ? 'color0' : item.status == 1 ? 'gery1' : 'navy_blue']"
				>
					<view class="dis-flex flex-x-between status-box flex-y-center">
						<text :class="['li', course.course_count==0||item.status == 3 ? 'b_g_violet1' : item.status == 1 ? 'b_g_gery1' : 'b_g_navy_blue']"></text>
						<text>课次{{ course.course_count==0||item.status == 2?'未预约':item.status == 3 ? item.is_start ? '授课中' :'未开始' : '已完成' }}</text>
						<text>{{ item.index }}/{{scheduleList.length}}</text>
					</view>
					<view class="dis-flex flex-x-between date">
						<block v-if="course.course_count!=0&&item.status!=2">
							<text>{{ item.date }}/{{ item.week }}</text>
							<text>{{ item.time }}</text>
						</block>
					</view>
				</view>
			</view>
		</zan-popup>
	</view>
</template>

<script>
import { commonMixinFun } from '@/static/mixins/common.js'; // 公共
import zanPopup from '@/components/popup/index.vue';
import API from '@/static/api/index.js';
import {format } from '@/static/uitls/common.js';
import { inverseAddressResolution } from '@/static/mixins/inverseAddressResolution.js';
const app = getApp();
	export default {
		mixins: [commonMixinFun,inverseAddressResolution],
		components: {
			zanPopup
		},
		onLoad(options){
			this.course_id=options.course_id
			//请求数据
			this._courseRead()
		},
		data() {
			return {
				course:{},
				scheduleList:[],
				// course_count:1,
				// scheduleList:[
				// 	{
				// 		index:1,
				// 		status:4,
				// 		date:'2020年6月8日',
				// 		week:'周一',
				// 		time:'13:00-14:00'
				// 	}
				// ],//课程进度
				showCourse: false, //是否弹出层
				// course_id:'',//课程id
				// course:{
				// 	finishTime:'2020.06.19  15:57',//完成时间
				// 	status:4,
				// 	is_start:true,
				// 	index:1,
				// 	data:'2020.06.19',
				// 	week:'星期三',
				// 	time:'16:30-15:30',
				// 	course_order:{
				// 		num:12,
				// 		classdata:1,
				// 		address:'水西地铁',
				// 		username:'吴佳敏',
				// 		phone:'1581515451'
				// 	},
				// 	surplus:11,
				// 	teacher_course:{
				// 		title:'测试',
				// 		teacher:{
				// 			nickname:'林老师',
				// 			headeravatar:'https://keyu.lclook.com/uploads/20200724/3cf937a82c389e844204a873ae38ba67.png',
				// 			teaching_year:1,
				// 			course_count:2
				// 		},
				// 		language:{
				// 			title:'英语'
				// 		}
				// 	},
				// },
				isRequest:false
			};
		},
		computed:{
			btnColor(){
				return function(status,is_start){
					// app._log("is_start:",status,is_start)
					let className=''
					if(status==3){
						if(is_start){
							// app._log("is_start:",status,is_start)
							//授课中
							className="schooling"
						}else{
							//未开始
							className="dns"
						}
					}else if(status==2){
						//待预约
						if(this.seletTime!=''){
							className="schooling"
						}else{
							className="dns"
						}
					}
					return className
				}
			},
		},
		methods:{
			callPhone() {
				if(this.course.user!=null){
					uni.makePhoneCall({
						phoneNumber: this.course.user.mobile
					});
				}else{
					this.showToast('信息已过期')
				}
			},
			_courseRead(){
				let {isRequest} = this
				if(!isRequest){
					isRequest=true
					API.getTeacherCourseRead(this.course_id).then(res=>{
						if(res.code==1){
							this.course=res.data.course
						}else{
							this.course={}
							this.showToast(res.msg);
						}
						isRequest=false
					}).catch(err=>{
						isRequest=false
						this.course={}
					})
				}
			},
			closeCoursePopup(delay = 0) {
				setTimeout(() => {
					this.showCourse = !this.showCourse;
				}, delay);
			},
			schedule(){
				if(this.course.status!=7){
					this.closeCoursePopup()
					API.getTeacherCourseDegree(this.course.course_order.course_order_id).then(res=>{
						if(res.code==1){
							this.scheduleList=res.data.course
							this.course_count=res.data.course_count
						}else{
							this.scheduleList=[]
							this.showToast(res.msg)
						}
					})
				}
				// if(this.course.index==1&&this.course.date==''){
				// }else{
				// 	if(this.course.teacher_course.course_count==this.course.course_order.num){
				// 		API.getTeacherCourseDegree(this.course.course_order.course_order_id).then(res=>{
				// 			if(res.code==1){
				// 				this.scheduleList=res.data.course
				// 				this.course_count=res.data.course_count
				// 			}else{
				// 				this.scheduleList=[]
				// 				this.showToast(res.msg)
				// 			}
				// 		})
				// 	}else{//不等就查看预约进度
				// 		API.courseReserve(this.course.course_order.course_order_id).then(res=>{
				// 			if(res.code==1){
				// 				this.scheduleList=res.data.course
				// 				this.course_count=res.data.course_count
				// 			}else{
				// 				this.scheduleList=[]
				// 				this.showToast(res.msg)
				// 			}
				// 		})
				// 	}
				// }
			},
			// bindSelectTime(){
			// 	let {course,bindDayList,selectedList}=this;
			// 	let {teacher_id,teacher_course_id,hour}=course.teacher_course;
			// 	let selectArr = selectedList.length>0?selectedList.filter(o=>o.times.length>0):[];
			// 	app._log(selectArr)
			// 	if(selectArr.length>0){
			// 		app._log('走哪了1')
			// 		uni.$emit("watchDay",{day:selectArr[0].date});
			// 	}
			// 	this.pageTo('/pages/select_time/index',{bindDayList:JSON.stringify(bindDayList),courseNum:1,teacher_id:teacher_id,teacher_course_id:teacher_course_id,hour:hour,isView:true})
			// },
			statusColor(status,is_start){
				// <text>{{course.status==3?(course.is_start?'授课中':'课程未开始'):course.status==2?'预约上课':item.status==4?'课次已完成':''}}</text>
				let color=''
				let {course} = this
				if(status==3){
					if(is_start){
						//授课中
						color="#ffa63e";
					}else{
						//未开始
						color="#7f4aff"
					}
				}else if(status==2){
					//待预约
					color="#7f4aff"
				}else if(status==4){
					//已完成
					color="rgba(37, 39, 72, 0.8)"
				}
				return color;
			},
			
		}
	}
</script>

<style scoped lang="scss">
.m-l-15{
	margin-left: 15rpx;
}
.course_num_text {
			font-size: 26rpx;
			line-height: 36rpx;
			color: #8f8f9a;
			.course_num {
				color: #7f4aff;
				padding: 0 8rpx;
			}
		}
.wrapper{
	.header{
		padding: 26rpx 48rpx;
		.next_icon{
			margin-left: 6rpx;
			width: 32rpx;
			height: 32rpx;
		}
		.surplus{
			margin-top: 12rpx;
			text{
				color: #7f4aff;
			}
			view{
				margin-right: 10rpx;
			}
		}
	}
	.course_info{
		background-color: white;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding:0 24rpx ;
		margin: 0 48rpx 16rpx 48rpx;
		.title{
			padding: 16rpx 0;
			border-bottom:1px solid #f2f2f2;
		}
		.info{
			border-bottom:1px solid #f2f2f2;
			padding: 26rpx 0;
			.headeravatar{
				image{
					width: 96rpx;
					height: 96rpx;
					margin-right: 16rpx;
					border-radius: 24rpx;
				}
			}
			.icon{
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}
			.m_r_10{
				margin-right: 10rpx;
			}
			.course_count{
				margin-bottom: 10rpx;
			}
		}
		.course_type{
			padding: 18rpx;
			// .language_title{
			// 	margin-bottom: 26rpx;
			// }
			view{
				margin-bottom: 26rpx;
			}
			.address{
				width: 400rpx;
			}
		}
	}
	.course_time{
		margin: 0 48rpx 16rpx 48rpx;
		height: 104rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 0 24rpx;
		text{
			margin-right: 10rpx;
		}
	}
	.bg_schooling{
		background: #7f4aff;
		color: white;
	}
	.bg_dns{
		background: #f0f0f6;
		color: #252748;
		opacity: 0.5;
	}
	.btn_box{
		line-height: 92rpx;
		position: fixed;
		width: 100%;
		bottom: 0;
		padding-bottom: calc(12rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
		.btn{
			margin: 0 48rpx;
			border-radius: 24rpx;
		}
	}
	.course_address{
		background-color: white;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding:0 24rpx 24rpx 24rpx;
		margin: 16rpx 48rpx;
		.title{
			padding: 24rpx 0 18rpx 0;
		}
		.address{
			image{
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
				margin-left: 16rpx;
			}
		}
		.address_detail{
			width: 450rpx;
			margin-bottom: 10rpx;
		}
		.navigation_icon{
			image{
				width: 32rpx;
				height: 32rpx;
			}
		}
		.address_box{
			padding:26rpx 0 ;
			background-image: linear-gradient(268deg, 
				#ffffff 0%, 
				rgba(146, 84, 255, 0.15) 100%);
			border-radius: 8px;
		}
	}
	.contact-with-students{
		padding: 24rpx 0;
		background-color: #ededf4;
		border-radius: 16rpx;
		margin-top: 16rpx;
		image{
			width: 40rpx;
			height: 40rpx;
			vertical-align:middle;
		}
	}
	.teaching-time{
		padding: 26rpx;
		background-color: white;
		margin: 16rpx 48rpx;
		border-radius: 16rpx;
		text{
			margin-left: 10rpx;
		}
		.finish-time{
			margin-top: 26rpx;
		}
	}
}
.course_type>view:last-child{
	margin-bottom:0!important;
}
.schedule-list-box {
	width: 750rpx;
	background: white;
	border-radius: 48rpx 48rpx 0rpx 0rpx;
	height: 664rpx;
	overflow-y: scroll;
	.li {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		margin-right: 18rpx;
		position: relative;
	}
	.title {
		line-height: 92rpx;
		position: relative;
		margin-bottom: 40rpx;
		image {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			right: 48rpx;
			top: 30rpx;
		}
	}
	.color0 {
		color: #7f4aff;
	}
	.item {
		padding: 0 48rpx 42rpx 48rpx;
		.status-box {
			width: 36%;
		}
		.date {
			width: 59%;
		}
	}
}
.li::after {
	content: '';
	height: 60rpx;
	width: 10rpx;
	position: absolute;
	bottom: -60rpx;
	left: 2px;
}
</style>
